<template>

	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="560px" :before-close="handleClose"
			:close-on-click-modal="false">
			<el-form :inline="false" :model="formInline" ref="edd-add-form" :rules="formRules" class="demo-form-inline"
				v-loading="loadingForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="上级分类:" prop="goodsTypeParentId">
							<div class="cell-input">
								<treeselect v-model="formInline.goodsTypeParentId" :options="menuOptions" :normalizer="normalizer"
									:show-count="true" placeholder="主类目" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="分类名称:" prop="goodsTypeName">
							<el-input v-model="formInline.goodsTypeName" class="cell-input" placeholder="请输入类目名称">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="排序号:" prop="sort">
							<el-input-number v-model="formInline.sort" class="cell-input" :controls="false"
								style="text-align: left;" :min="0" :max="9999" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="小程序显示:" prop="status">
							<el-radio-group v-model="formInline.status">
								<el-radio :label="0">隐藏</el-radio>
								<el-radio :label="1">显示</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="分类图片:" prop="goodsTypePic">
							<ImageUpload v-model="formInline.goodsTypePic" :limit="1" :width="750" :height="750" :fileSize="2">
							</ImageUpload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<span slot="footer" class="dialog-footer" v-if="!loadingForm">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";

	import {
		addWcGoodsType,
		updataWcGoodsType,
		findWcGoodsType,
		listWcGoodsType
	} from "@/api/culturalCreativity/classification.js";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	let _this;
	export default {
		components:{
			Treeselect
		},
		data() {
			return {
				title: '',
				id: null,
				getToken: getToken(),
				dialogVisible: false,
				formRules: {
					goodsTypePic: {
						required: true,
						message: '上传文件',
						trigger: 'change'
					},
					goodsTypeName: {
						required: true,
						message: '请输入分类名称',
						trigger: 'change'
					},
					status: {
						required: true,
						message: '请选择',
						trigger: 'change'
					},
					sort: {
						required: true,
						message: '请输入排序',
						trigger: 'change'
					},
					goodsTypeParentId: {
						required: false,
						message: '请选择上级分类',
						trigger: 'change'
					}
				},
				formInline: {},
				loadingScreen: null,
				loadingForm: false,
				fileName: '',
				btnLoading: false,
				menuOptions:[]
			}
		},
		methods: {
			async init(id) {
				try {
					_this = this;
					this.title = '';
					this.resetFrom();
					this.dialogVisible = true;
					await this.getLeiMu();
					if (this.$refs['edd-add-form']) this.$refs['edd-add-form'].resetFields();
					if (!id) return this.title = '新增';
					this.title = '修改'
					this.loadingForm = true;
					let res = await findWcGoodsType(id);
					this.loadingForm = false;
					this.formInline.goodsTypeId = id;
					Object.keys(this.formInline).forEach(item => {
						this.formInline[item] = res.data[item];
					});
				} catch (e) {
					this.loadingForm = false;
					//TODO handle the exception
				}
			},
			async getLeiMu() {
				this.menuOptions = [];
				let res = await listWcGoodsType({}, {
					pageNum: 1,
					pageSize: 99999,
				});
				const menu = {
					goodsTypeId: '',
					goodsTypeName: '主类目',
					children: []
				};
				menu.children = this.handleTree(res.rows, "goodsTypeId","goodsTypeParentId");
				this.menuOptions.push(menu);
				return;
			},
			resetFrom() {
				this.formInline = {
					goodsTypePic: "",
					goodsTypeName: "",
					status: 0,
					sort: "",
					goodsTypeParentId: ""
				}
			},
			handleClose() {
				this.dialogVisible = false;
			},
			handleUpFileChange(file) {
				if (file.response) {
					if (file.response.code == 200) {
						this.fileName = file.name;
						this.formInline.attachmentAddress = file.response.url;
						this.$refs['edd-add-form'].validateField('attachmentAddress');
					} else {
						this.fileName = '文件上传失败，请重新上传。'
					}
					this.loadingScreen.close();
				} else {
					this.loadingScreen = this.$loading({
						lock: true,
						text: '上传文件中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
				}
			},
			handleSubmit() {
				this.$refs['edd-add-form'].validate(async valid => {
					try {
						if (valid) {
							let res;
							this.btnLoading = true;
							if (!this.formInline.goodsTypeId) {
								res = await addWcGoodsType(this.formInline);
								this.$message.success("添加成功");
							} else {
								res = await updataWcGoodsType(this.formInline);
								this.$message.success("更新成功");
							}
							this.btnLoading = false;
							this.dialogVisible = false;
							this.$emit("success");
						}
					} catch (e) {
						this.btnLoading = false;
					}
				});
			},
			handleReasonListDel(index) {
				let arr = this.formInline.list;
				this.formInline.list = [...arr.slice(0, index), ...arr.slice(index + 1, arr.length)];
				this.$refs['edd-add-form'].validateField('reason');
			},
			/** 转换菜单数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				};
				return {
					id: node.goodsTypeId,
					label: node.goodsTypeName,
					children: node.children
				};
			},
			handleReasonListAdd() {
				this.formInline.list.push({
					holidays: this.otherValue,
					dayNumber: 1
				});
				this.$refs['edd-add-form'].validateField('reason');
			}
		},
		created() {
			this.resetFrom();
		},
		computed: {}
	}
</script>
<style lang="scss" scoped>
	::v-deep .el-input__inner{
		text-align: left;
	}
	.width100 {
		width: 590px;
	}

	.cell-input {
		width: 200px;
	}

	.up-file-wrappar {
		display: flex;
		align-items: center;
	}

	.total-day {
		display: inline-block;
		height: 36px;
		width: 40px;
		margin: 0 6px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.up-file-name {
		display: inline-block;
		height: 36px;
		min-width: 555px;
		text-align: left;
		line-height: 36px;
		box-sizing: border-box;
		padding: 0 15px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		color: #606266;
		font-size: inherit;

		.text {
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 1; //行数
			-webkit-box-orient: vertical;
			max-width: 555px;
		}
	}
</style>
